<!--组件：scaffold.vue-->
<!--适合场景：顶部固定 - 内容 - 底部固定-->
<!--使用方法：套在页面或者组件的最外层-->

<template>
  <view class="com-root" :style="[wrapperStyle]">
    <!--页面正文-->
    <view class="com-match com-column">
      <!--
            <up-status-bar v-if="safeTop" :customStyle="{backgroundColor: safeTopColor}"/>
      -->
      <safe-top v-if="safeTop"/>
      <!--页面顶部(固定)-->
      <slot name="page-top"></slot>

      <!--页面中间内容-->
      <view class="com-expanded" :style="[{backgroundColor: contentColor}]">
        <slot name="page-content"></slot>
      </view>

      <!--页面底部(固定)-->
      <slot name="page-bottom"></slot>

      <!--底部安全距离-->
      <up-safe-bottom v-if="safeBottom" :customStyle="{backgroundColor: safeBottomColor}"/>
    </view>

    <!--弹窗等放在此处-->
    <view>
      <slot name="overlay"></slot>
    </view>
  </view>
</template>

<script>
import SafeTop from "./safe-top.vue";

export default {
  name: "scaffold",
  components: {SafeTop},
  props: {
    pageStyle: {
      type: [Object, String],
      default: () => {

      }
    },
    safeTopColor: {
      type: String,
      default: '#f3f4f6'
    },
    contentColor: {
      type: String,
      default: '#f3f4f6'
    },
    safeBottomColor: {
      type: String,
      default: '#f3f4f6'
    },
    safeTop: {
      type: Boolean,
      default: false
    },
    safeBottom: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    wrapperStyle() {
      return uni.$u.addStyle(this.pageStyle);
    },
  },
  data() {
    return {}
  },
  onLoad(param) {

  },
  methods: {},
}
</script>

<style scoped lang="scss">

</style>